<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="product-div"> <a class="image-popup-vertical-fit" href="http://placehold.it/1200x5000" title="Image ID:018"> <div class="product-image" style="background-image:url('http://placehold.it/1200x5000');" > </div> </a> <h4>Product Name</h4> </div> </div> <div class="col-md-4"> <div class="product-div"> <a class="image-popup-vertical-fit" href="http://placehold.it/650x350" title="Image ID:014"> <div class="product-image" style="background-image:url('http://placehold.it/650x350');" > </div> </a> <h4>Product Name</h4> </div> </div> <div class="col-md-4"> <div class="product-div"> <a class="image-popup-vertical-fit" href="http://placehold.it/350x650" title="Image ID:020"> <div class="product-image" style="background-image:url('http://placehold.it/350x650');" > </div> </a> <h4>Product Name</h4> </div> </div> </div> </div>

.product-div{ text-align:center; border:1px solid #ccc; padding-bottom: 15px; } .product-image{ position: relative; padding-top:120px; padding-bottom:120px; background-position:center; background-repeat:no-repeat; background-size:cover; }

$(document).ready(function() { $('.image-popup-vertical-fit').magnificPopup({ type: 'image', closeOnContentClick: true, mainClass: 'mfp-img-mobile', image: { verticalFit: true } }); });